<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

        <title>人员管理</title>
            
        <!-- CSS --> 
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link href="css/animate.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        <link href="css/form.css" rel="stylesheet">
        <link href="css/calendar.css" rel="stylesheet">
        <link href="css/media-player.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/icons.css" rel="stylesheet">
        <link href="css/generics.css" rel="stylesheet"> 
        <link href="css/menu.css" rel="stylesheet">
        <!--<link rel="stylesheet" type="text/css" href="css/alert.css"/>-->
        <!--<link rel="stylesheet" type="text/css" href="css/all.css"/>-->
        <!--<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">-->
    
        <style type="text/css">
        	body{
        		margin: 0 auto;
        	}
        	#RenYuan td #play2 th{
        		display: inline-block;
        		height: 50px;
        		width: 140px;
        	}
        	.Delete{
        		color: darkorange;
        		cursor:pointer;
        	}
        	.Add{
        		/*color: darkorange;*/
        		cursor:pointer;
        	}
        	.Add:hover{
        		color: darkorange;
        		cursor:pointer;
        	}
        	.Deit{
        		cursor:pointer;
        	}
        	.lessChange{
        		width: 99%;
        		position: relative;
        		left: 5px;
        	}
        	#tianjia{
        		width: 720px;
        		height: 720px;
        		margin-left: 8px;
        		background-image:url(img/guowan1.png);
        		background-size: 100% 100%;
        		overflow: hidden;
        		color: black;
        		font-family: "微软雅黑";
        		/*background-color: gainsboro;*/
        	}
        	#container input{
        		color: #000000;
        		border-color:gray ;
        		border-radius: 5px;
        		/*background-color:darkseagreen;*/
        	}
        	#tianjia label{
        		color: black;
        	}
        	#tianjia h3{
        		color:black;
        	}
        	#tianjia textarea{
        		color: black;
        	}
        </style>
    </head>
    <body id="skin-blur-blue">
        <header id="header" class="media">
            <a href="" id="menu-toggle"></a> 
            <a class="logo pull-left" href="asset_management.html">电力管理系统</a>
            
            <div class="media-body">
                <div class="media" id="top-menu">
                    <div class="pull-left tm-icon">
                        <a data-drawer="messages" class="drawer-toggle" href="">
                            <i class="sa-top-message"></i>
                            <i class="n-count animated"></i>
                            <!--<span class="icon">&#61874;</span>-->
                            <span>人员更新</span>
                        </a>
                    </div>
                    <div class="pull-left tm-icon">
                    			
                        <a data-drawer="notifications" class="drawer-toggle" href="">
                            <i class="sa-top-updates"></i>
                            <i class="n-count animated"></i>
                            <span>添加人员</span>
                        </a>
                    </div>
                    
                    

                    <div id="time" class="pull-right">
                        <span id="hours"></span>
                        :
                        <span id="min"></span>
                        :
                        <span id="sec"></span>
                    </div>

                    <div class="media-body">
                        <input type="text" class="main-search">
                    </div>
                </div>
            </div>
        </header>
        
        <div class="clearfix"></div>
        
        <section id="main" class="p-relative" role="main">

            <!-- Sidebar -->
            <aside id="sidebar">

                <ul class="list-unstyled side-menu" style="width: 100%!important;padding-top: 20px;text-align: center;line-height: 40px;">
                    <!--<li>
                        <a href="operational_monitoring.html" id='menuurl'>
                            <i class="fa fa-calendar-o"></i><span> 运行监测</span>
                        </a>
                    </li>
                    <li>
                        <a  href="keyInfo.html"  id='menuurl'>
                            <i class="fa fa-bar-chart-o"></i><span> 文件上传</span>
                        </a>
                    </li>
                    <li>
                        <a href="mstp_map.html" id='menuurl'>
                            <i class="fa fa-bar-chart-o"></i><span> 全息图概览</span>
                        </a>
                    </li>-->
                     <li >
                        <a href="asset_management.html"  id='menuurl'>
                            <i class="fa fa-building-o"></i><span> 资产管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="trajectory.html"  id='menuurl'>
                            <i class="fa fa-sort-amount-asc"></i><span> 历史轨迹</span>
                        </a>
                    </li>
                    <li>
                        <a href="Three_span_point.html" id='menuurl'>
                            <i class="fa fa-calendar-o"></i><span> 三跨点管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="ice.html"  id='menuurl'>
                            <i class="fa  fa-money"></i><span> 隐患点管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="fire.html" id='menuurl'>
                            <i class="fa fa-calendar-o"></i><span> 山火点管理</span>
                        </a>
                    </li>
                    <!--<li>
                        <a href="deviceManager.html"  id='menuurl'>
                            <i class="fa fa-briefcase"></i><span> 设备管理</span>
                        </a>
                    </li>-->
                   
                    <li class="active">
                        <a href="userMng.html" id='menuurl'>
                            <i class="fa fa-users"></i><span> 用户管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="fileupdata.html" id='menuurl'>
                            <i class="fa fa-cogs"></i><span > 文件管理</span>
                        </a>
                    </li>
                </ul>
                

            </aside>
        
            <!-- Content -->
            <section id="content" class="container">
                <!-- Messages Drawer -->
               
               <div id="messages" class="tile drawer animated" style="height: 550px;">
                    <div class="listview narrow">
                        <div class="media">
                            <span>更新人员资料</span>
                            <span class="drawer-close">&times;</span>

                        </div>
                        <div id="editAlert" class="overflow" style="height: 1300px；">
                            <!--人员更新模态框-->
									
                            
                            
                            
                        </div>
                        <div class="media text-center whiter l-100">
                            <!--<a href=""><small>查看所有</small></a>-->
                        </div>
                    </div>
                </div>
               
               
               
                <!-- 弹出界面 -->
                <!--人员添加模态框-->
               
                <div id="notifications" class="tile drawer animated" style="height: 500px;">
                    <div class="listview narrow" >
                        <div class="media">
                            <span>新增人员</span>
                            <span class="drawer-close">&times;</span>
                            <div class="container">
							    <div class="row">
							        <!--<div class="col-sm-12" >
							            <h1>人员的添加以及修改</h1>
							        </div>-->
							    </div>
							    <div class="row">
							        <div class="col-sm-12">
							          
									
									<!-- 新增人员表单 -->
									
									
									<!-- 模态框（Modal）-->
									<div class="modal fade" role="dialog" id="myModal">
										 <div class="modal-dialog modal-sm">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<h4 class="modal-title" id="myModalLabel">三明电力</h4>
												</div>
												<div class="modal-body">
													
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
												</div>
											</div>
										</div>
									</div>
										 
									</div>
							    </div>
							</div>
                        </div>
                        <div class="media text-center whiter l-100">
                            
                        </div>
                    </div>
                </div>

                <!-- Breadcrumb -->
                <ol class="breadcrumb hidden-xs">
                    <li><a href="index.html">主页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">用户管理</li>
                </ol>
                
                <h4 class="page-title">查看巡检人员</h4>
                                
                
                <!--人员显示界面-->
                <div class="block-area" id="defaultStyle">
                    <div class="row"> 
                    <div class="col-md-10">
                     <div class="tile">
                       <h2 class="tile-title">巡检人员信息</h2>
                    <table class="table tile" id="RenYuan" >
                        <thead>
                            <tr id="play2">
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>联系电话</th>
                                <th>家庭住址</th>
                              	<th>身份代码</th>
                              	<th>新增</th>
                              	<th>修改</th>
                              	<th>删除</th>
                              	
                            </tr>
                        </thead>
                        <tbody id="renyuan">
                        	
                        </tbody>
                    </table>
                    <div class="btn-group">
                        
                    </div>
                    </div>
                    </div>
                    <div class="container">
					    
					</div>
                
   
            </section>
            
            <br/><br/>
        </section>
        
        <!-- Javascript Libraries -->
        <!-- jQuery -->
         <script src="js/jquery-3.2.1.js"></script> <!-- jQuery Library -->
         <script src="js/bootstrap.js"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.dataTables.bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/media-player.min.js"></script> <!-- USA Map for jVectorMap -->
        <!-- UX -->
        <script src="js/scroll.min.js"></script> <!-- Custom Scrollbar -->
        
        <!-- Other -->
        <script src="js/calendar.min.js"></script> <!-- Calendar -->
        
         <script src="js/Tabullet.js"></script>
        <!-- All JS functions -->
        <script src="js/functions.js"></script>
        <!--<script src="js/alert.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="layer-v3.1.0/layer/layer.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>-->
        <!--<script src="js/register.js" type="text/javascript" charset="utf-8"></script>-->
    	<script src="js/urlConfig.js" type="text/javascript" charset="utf-8"></script>
       
        <script type="text/javascript">
//      	var url="http://117.27.139.39:4322/"
//      	￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥获取人员信息￥￥￥￥￥￥￥￥￥￥￥￥￥￥
        	$.ajax({
		        //url: 'http://192.168.1.41:1337/peopleLineList',
		        url:url+'user',
		        //data: "127605d5-ee91-4557-a7fe-fb096918b6bc",
		        type: 'get',
		        dataType: 'json',
		        success: function (data) {
		        	console.log('获取人员成功');
		        	console.log(data)
//		        	console.log(data.data[i].name)
		        	console.log(data.data.length);
		        	
		        	var trend='';
		        	
		        	for(var i=0;i<data.data.length;i++){
	        		var userId=data.data[i].id	            
			                   
			            trend +='<tr>'                
			            trend +='<td>'+data.data[i].name+'</td>'                    
			            trend +='<td class="sex">'+data.data[i].sex+'</td>'                    
			            trend +='<td>'+data.data[i].age+'</td>'
			            trend +='<td>'+data.data[i].Telno+'</td>'                    
			            trend +='<td>'+data.data[i].addr+'</td>' 
			            trend +='<td>'+data.data[i].id+'</td>'
			            trend +='<td id="Add" class="Add">'+'新增'+'</td>'
			            trend +='<td class="test">'+'<a id="giveI" data-drawer="messages" class="drawer-toggle" href="">修改</a>'+'</td>'
			           	trend +='<td id="'+userId+'" class="Delete">'+'删除'+'</td>'
			           	
			            trend +='</tr>'                
			                         
		        	}
		        	$('#renyuan').append(trend);
		        	form_renyuan();
			        var trend1='';	
			        
			        if(1==1){
			        	var k=0;
			        	
			        	var GetI = document.getElementsByClassName("test");
							for(var x = 0; x < GetI.length; x++) {
							    getConsole(x);
							}
//			       		  console.log(GetI.length)
//			       		  console.log(GetI)
			       		 function getConsole(x){
						    GetI[x].addEventListener("click", function() {
						        console.log('I的值为：'+x);
						        console.log(data.data[x].id);
						        $('#editAlert').children('div').remove();

						        trend1 ='';
						        trend1 +='<div class="container">'
						        
								trend1 +='<form  method="put" id="edit">'
									
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<input type="text" class="form-control" id="inputUserid1" name="password"  placeholder="请填写身份代码" value='+data.data[x].id+'  />'
								trend1 +='</div>'
											
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<input type="text" class="form-control" name="petname" id="inputName1" required pattern="^[a-zA-Z0-9\u4e00-\u9fa5]{2,16}$" placeholder="请填写姓名" value='+data.data[x].name+' />'
								trend1 +='</div>'
											
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<input type="number" class="form-control" id="inputAge1" name="age" maxlength="2" required pattern="^.{1,2}$" placeholder="请填写年龄（1-99/岁）" value='+data.data[x].age+' />'
								trend1 +='</div>'
											
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<input type="number" class="form-control" id="inputTelno1" maxlength="11" required pattern="^.{10,12}$" placeholder="请填写联系电话（11位）" value='+data.data[x].Telno+' />'
								trend1 +='</div>'
										
								trend1 +='<div class="checkbox">'+'<label for="male">'+'<input type="radio" name="isMale" value="0" id="male" '+'checked'+'/>先生</label>'+'</div>'+'<div class="checkbox">'+'<label for="female">'+'<input type="radio" name="isMale" value="1" id="female" />女士</label>'+'</div>'
								
									
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<textarea class="form-control" name="content" rows="3" cols="" id="inputAddr1" placeholder="请详细填家庭住址" >'+data.data[x].addr+'</textarea>'
								trend1 +='</div>'
											
								trend1 +='<div class="form-group lessChange">'
								trend1 +='<textarea class="form-control"  name="content" rows="3" cols=""  placeholder="备注" ></textarea>'
								trend1 +='</div>'
											
								trend1 +='<input id="Edit" type="submit" class="btn btn-success form-control lessChange" value="修改人员" />'
								trend1 +='</form>'
								trend1 +='</div>'
								
						        $('#editAlert').append(trend1);	
								
					       		
						    });
//						  	 
						};
						

			       		}
			       		
			       		
			       		
//		        	格式化性别
		        	for(var  i = 0;i<$('.sex').length;i++){
				        var sexChange = $('.sex').eq(i).text();
				        if (sexChange==0){
					        	$(".sex").eq(i).text('男');
					        }else if (sexChange==1){
					        	$(".sex").eq(i).text('女');
					        }else if (sexChange=='null'){
					        	$(".sex").eq(i).text('未知');
					        }
					   	}
			        }
			    });
				  
				    //-----------------删除----------------
				
				$(document.body).on('click',".Delete",function(){
					var result=confirm('你确定要删除么？')
					
					
					if(result){
						
//							console.log($(this.parent))
							$.ajax({
					        type: "delete",
					        url:url+'user',
					        dataType: 'json',
					        data: {
						    	"userId": this.id
						    	
							},
					        success: function (data, status) { 
					        	console.log(data);
					        	console.log(status)
					        	console.log($(this))
					        	if(data.message == "删除成功"){
					        		layer.msg("人员信息删除成功");
					        		setTimeout( function(){
								     //add your code
								    parent.location.reload()
								}, 1500);//延迟1500毫米
					        		
					        	}
					        	
					    		}
							})
					}
				})
    

				//+++++++++++++++++++++++添加人员++++++++++++++++++++++++++++++++++
				$(document.body).on('click',"#Add",function(){
				layer.open({
						type: 1,
						area: ['720px', '720px'],
						shadeClose: true, //点击遮罩关闭
						content: '<div id="tianjia">' +
							'<div id="container">' +
							
										'<form  method="post">'+
											'<!-- 姓名 -->'+
											'<div class="form-group">'+
												'<h3>请填写姓名:</h3><input type="text" class="btn-success form-control" name="petname" id="inputName" required pattern="^[a-zA-Z0-9\u4e00-\u9fa5]{2,16}$" placeholder="请填写姓名" />'+
											'</div>'+
											'<!-- 年龄 -->'+
											'<div class="form-group">'+
												'<h3>请手动输入年龄，输入框尾部可进行精确调整</h3><input type="number" max="99" maxlength="2" class="btn-success form-control" id="inputAge" name="age" required pattern="^.{1,2}+"$"" placeholder="请填写年龄（1-99/岁）"/>'+
											'</div>'+
											'<!-- 联系电话 -->'+
											'<div class="form-group">'+
												'<h3>添加联系电话:</h3><input type="number" maxlength="11" class="btn-success form-control" id="inputTelno" required pattern="^.{10,12}$" placeholder="请填写联系电话（11位）" />'+
											'</div>'+
											'<!-- 性别 -->'+
											'<h3>请选择新增用户的性别<h3>'+
											'<div class="checkbox">'+
												'<label for="male">'+
													'<input type="radio" name="isMale1" value="0" id="male" checked />'+
													'先生'+
												'</label>'+
											'</div>'+
											'<div class="checkbox">'+
												'<label for="female">'+
													'<input type="radio" name="isMale1" value="1" id="female" />'+
													'女士'+
												'</label>'+
											'</div>'+
											'<!-- 地址 -->'+
											'<div class="form-group">'+
												'<h3>请填写新增用户的详细地址:</h3><textarea class="btn-success form-control" name="content" rows="3" cols="" id="inputAddr" placeholder="请详细填家庭住址" ></textarea>'+
											'</div>'+
											'<!-- 备注 -->'+
											'<div class="form-group">'+
												'<h3>备注:</h3><textarea class="btn-success form-control"  name="content" rows="5" cols=""  placeholder="备注" ></textarea>'+
											'</div>'+
											'<!-- 提交按钮 -->'+
											'<input id="submit" type="submit" class="btn btn-success form-control" value="添加人员" />'+
										'</form>'+
									
							'</div>'+
							'</div>'
					});
				})
				
				$(document.body).on('click',"#submit",function(event){
					// 阻止表单的默认提交事件
					event.preventDefault();
				//	发送数据到后端
					 $.ajax({
				//   	parent.location.reload()
				        type: "post",
				        url:url+'user',
				        dataType: 'json',
				        data: {
				//      	"id": "96932e60-821d-11e7-b2c7-712f16790ee3",
					      "name": $("#inputName").val(),
					      "sex": $("input[name='isMale1']:checked").val(),
					      "age": $("#inputAge").val(),
					     
					      "addr": $("#inputAddr").val(),
					      "Telno": $("#inputTelno").val()
				},
				        success: function (data, status) { 
				        	console.log(data)
				        	console.log(status)
				        	console.log(data.message)
				        	
				        	if(data.message == "添加成功"){
				        		layer.msg("人员信息添加成功");
				        		setTimeout( function(){
								     //add your code
								    parent.location.reload()
								}, 1500);//延迟1500毫米
				        	}if(data.message=="添加失败，服务器内部错误"){
				        		layer.msg("人员信息添加失败请检查信息格式是否准确！");
				        	}
				        	
				        }
				    });
				    
				 });    
			    
			//&&&&&&&&&&&&&&&&&&&&&&&&&&&人员更新&&&&&&&&&&&&&&&&&&&&&&&&&&&
			$(document.body).on('click',"#Edit",function(event){
				// 阻止表单的默认提交事件
				event.preventDefault();
			//	发送数据到后端
				 $.ajax({
			//   	parent.location.reload()
			        type: "put",
			        url:url+'user',
			        dataType: 'json',
			        data: {
			          "id": $("#inputUserid1").val(),
				      "name": $("#inputName1").val(),
				      "sex": $("input[name='isMale']:checked").val(),
				      "age": $("#inputAge1").val(),
				      
				      "addr": $("#inputAddr1").val(),
				      "Telno": $("#inputTelno1").val()
			},
			        success: function (data, status) { 
			        	console.log(data)
			        	console.log(status)
			        	
			        	if(data.message == "更新成功"){
			        		
			        		layer.msg("人员信息更新成功");
			        		setTimeout( function(){
								     //add your code
								    parent.location.reload()
								}, 1500);//延迟1500毫米
			        	}
			        	
			        }
			    });
			    
			});  
			
			function form_renyuan() {
			var renyuans = $('#RenYuan').dataTable({
				"aaSorting": [], //默认第几个排序
				"bStateSave": false, //状态保存
				"bFilter": true,
				"aoColumnDefs": [
					//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
					{
						"orderable": false,
						"aTargets": [0, 1, 2]
					} // 制定列不参与排序
				]
			});
		
			}
        </script>
        
        
        
    </body>
</html>

